{% extends "index.html" %}
{% load i18n %}

{% block content %}
<form method="post" action="{% url orders-order %}">
{% csrf_token %}
<table style="border:1px solid blue;margin:5px auto;">
<tr>
    <th>{{ form.count.label_tag }}:</th>
    <td>{{ form.count }}{{ form.count.errors }}</td>
    <th>{{ form.art_name.label_tag }}:</th>
    <td>{{ form.art_name }}{{ form.art_name.errors }}</td>
    <th>{{ form.art_supplier.label_tag }}:</th>
    <td>{{ form.art_supplier }}{{ form.art_supplier.errors }}</td>
    <th>{{ form.art_id.label_tag }}:</th>
    <td>{{ form.art_id }}{{ form.art_id.errors }}</td>
</tr>
<tr>
    <th>{{ form.art_q.label_tag }}:</th>
    <td>{{ form.art_q }}{{ form.art_q.errors }}</td>
    <th>{{ form.art_price.label_tag }}:</th>
    <td>{{ form.art_price }}{{ form.art_price.errors }}</td>
    <th>{{ form.oday.label_tag }}:</th>
    <td>{{ form.oday }}{{ form.oday.errors }}</td>
    <th></th><td></td>
</tr>
<tr>
    <th title="{% trans "Klick to enter message." %}" id="memo_cell">
        {% trans "Memo" %}
    </th>
    <td><span style="display:none;position:absolute;z-index:3;" id="memo_field">
        {{ form.memo }}</span>
    </td>
    <th>{{ form.exam.label_tag }}:</th>
    <td>{{ form.exam }}{{ form.exam.errors }}</td>
    <th>{{ form.repair.label_tag }}</th>
    <td>{{ form.repair }}{{ form.repair.errors }}</td>
    <th></th><td></td>
</tr>
</table>
<table style="border:1px solid blue;margin:5px auto;">
<tr>
{% for c in costs %}
<td class="rotate" style="height:70px;width:20px;">{{ c }}</td>
{% endfor %}
</tr>
<tr>
{% for c in costs %}
<td><input type="text" name="cost_{{ c.short_name }}" maxlength="3" size="3" /></td>
{% endfor %}
</tr>
</table>
<div style="margin:5px auto;width:10%;text-align:center;">
<input type="submit" value="{% trans "Save" %}" />
</div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $.getJSON('{% url orders-api-article article_id %}', function(data) {
        $.each(data, function(key, val) {
            $("#id_" + key).val(val);
        });
    });
});
$('#memo_cell').click(function() {
    $('#memo_field').toggle();
});
</script>

{% endblock %}

